<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <el-row justify="center">
                    <el-col :span="8">
                        <img class="logo" src="@/assets/logo-full-ae646a7b.png" alt="Logo"/>
                    </el-col>
                </el-row>
                <el-row justify="center" style="margin-top: 40px; font-size: 20px; color: #333333;font-weight:initial;">
                    <el-col :span="8">
                        自动化测试平台
                    </el-col>
                </el-row>
            </el-header>
            <el-main>
                <el-row :gutter="100" justify="center" style="margin-top: 35px;">
                    <el-col :span="8">
                        <el-card class="box-card">
                    <el-form ref="loginFormRef" :model="loginForm" class="login-form" autocomplete="on"
                        label-position="top">
                        <el-form-item class="login-form--item" prop="username" label="用户名">
                            <el-input ref="usernameRef" v-model="loginForm.username" placeholder="请输入用户名" name="username" @keyup.enter="handleLogin">
                                <!-- <template #prefix>
                                    <i-ep-avatar />
                                </template> -->
                            </el-input>
                        </el-form-item>

                        <el-form-item class="login-form--item" prop="password" label="密码">
                            <el-input class="login-form--input" type="password" ref="passwordRef" v-model="loginForm.password" placeholder="请输入密码"
                                name="password" @blur="capsTooltip = false" @keyup.enter="handleLogin">
                                <!-- <template #prefix>
                                    <i-carbon-password />
                                </template> -->
                                </el-input>
                        </el-form-item>

                        <el-button :loading="loading" type="primary" class="login-form--submit"
                            @click.prevent="handleLogin">
                            <template #icon>
                                <i-carbon-login/>
                            </template>
                            <text style="font-size: 15px;">登录</text>
                        </el-button>
                    </el-form>
                </el-card>
                    </el-col>
                </el-row>
                
            </el-main>
        </el-container>
    </div>
</template>

<script lang="ts" setup>
import { message } from "ant-design-vue";
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import appStore from '@/pinia';

type LoginType = {
    username: string;
    password: string;
};
const router = useRouter();
const usernameRef = ref<Element>();
const passwordRef = ref<Element>();
const loginFormRef = ref<Element>();

const loginForm = ref<LoginType>({
    username: '',
    password: '',
})
const loginRules = {
    username: [{ message: '请输入正确的用户名', required: true, trigger: 'blur' }],
    password: [{ message: '密码长度为6~20', required: true, trigger: 'blur', min: 6, max: 20 }],
}
const loading = ref(false)
const capsTooltip = ref(false)

const handleLogin = async () => {
    if (loginFormRef.value) {
        const valid = await (loginFormRef.value as any).validate();
        if (valid) {
            loading.value = true;
            try {
                await appStore.userModule.login(loginForm.value)
                message.success("登陆成功！");
                router.push({
                    path: 'home',
                })
            } catch (error) {
                window.console.error('Error during login: ' + error);
            } finally {
                setTimeout(() => {
                    loading.value = false;
                }, 0.5 * 1000);
            }
        }
    }
}

onMounted(() => {
    if (loginForm.value.username === '') {
        (usernameRef.value as any).focus();
    } else if (loginForm.value.password === '') {
        (passwordRef.value as any).focus();
    }
});


</script>


<style lang="scss" scoped>
.common-layout {
    height: 100%;
    background: #f3f3f3;
    text-align: center;
    padding-top: 100px;
}

.box-card {
   border-radius: 10px;
   margin-top: 20px;
   border: none;
   margin-left: 10px;
}

.login-form--item {
    margin-top: 20px;
    padding: 0 10px;
}

input{
    background-color: #f9fbfa;
    border-radius: 5px;
    width: 100%;
    height: 34px;
    border: solid 1px #ccc;
    color: #555;
    padding-left: 10px;
    outline: none;
}

::v-deep .login-form--item .el-input__wrapper {
    background-color: #f9fbfa;
    width: 100%;
    height: 35px;
    padding: 0%;
}

::v-deep .login-form--item .el-input__inner{
    height: 35px;
    border-radius: 5px;
    padding-left: 10px;
    &:focus{
    border-color: #62aee5 !important;
    box-shadow: 0 0 5px #62aee5 !important;
    }
}

input:focus {
    border-color: #62aee5 !important;
    box-shadow: 0 0 5px #62aee5;
}

.login-form--submit {
    border: none;
    background: #0080c4;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 20px 0;
    width: 96%;
    height: 46px;
}

.login-form--submit:hover{
    background: #00659e;
}

</style>